<template>
  <div class="app-container">
    <gantt class="left-container" :tasks="tasks" @dblclick="taskClick"></gantt>
  </div>
</template>
<script>

  import Gantt from '../../../common/others/gantt'
  export default {
    name: 'gantt-index',
    components: { Gantt },
    data() {
      return {
        tasks: {
          data: [
            {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6},
            {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 3, text: 'Task #2', start_date: '2021-01-20', duration: 3, progress: 0.4},
            {id: 4, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 5, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 6, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 7, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 8, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 9, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 10, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
            {id: 11, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4},
          ],
          links: [
            {id: 1, source: 1, type: '0'}
          ]
        }
      }
    },
    methods: {
      taskClick(task){

      }
    },
    mounted() {

    }
  }
</script>
<style lang="scss">
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 400px;
    overflow-y: auto;
  }
</style>
